<template>
    <view class="dietDetails" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar :title="barTitle" backgroundColor="#FAFAFA"></nav-bar>
        <view class="m-container">
            <view class="date_h">
                <view class="pre_p" @click=" reduceTap ">
                    <text class="iconfont icon-ln_sanjiaozuo"></text>
                </view>
                <view class="date_m" @click="showCalendar = true">
                    <text>{{ currentSearchTime }}</text>
                    <text class="iconfont icon-ln_sanjiaoxia"></text>
                </view>
                <view class="next_p" @click=" plusTap ">
                    <text class="iconfont icon-ln_sanjiaoyou"></text>
                </view>
            </view>
        </view>
        <view class="o_e_card" v-for="(item, index) in recommendList" :key=" index ">
            <view class="c_tips">
                <image class="icon" :src="list[index].img" mode="scaleToFill" />
                <text>{{ list[index].name }}</text>
            </view>
            <view class="card_c">
                <view class="item">
                    <view class="text">碳水(g)</view>
                    <view class="num">{{ item.choContent | cardVal }}</view>
                </view>
                <view class="item">
                    <view class="text">脂肪(g)</view>
                    <view class="num">{{ item.fatContent | cardVal }}</view>
                </view>
                <view class="item">
                    <view class="text">蛋白质(g)</view>
                    <view class="num">{{ item.proteinContent | cardVal }}</view>
                </view>
                <view class="item">
                    <view class="text">总摄入量(Kcal)</view>
                    <view class="num">{{ item.energyContent | cardVal }}</view>
                </view>
            </view>
            <view class="btn-ss">
                <view class="btn-item" @click="handleoOptionPopup(item)">
                    膳食方案
                    <u-icon name="arrow-down" size="10" color="#666666"></u-icon>
                </view>
                <view class="btn-item" @click="handleoDetailPopup(item)">
                    营养信息详情
                    <u-icon name="arrow-down" size="10" color="#666666"></u-icon>
                </view>
            </view>
        </view>
        <my-calendar
            :monthNum=" 24 "
            :defaultDate=" defaultDate "
            :maxDate=" maxDate "
            @confirm=" selectDate "
            :minDate=" minDate "
            :show=" showCalendar "
            color="#545DDE"
            closeOnClickOverlay
            @close="showCalendar = false"
        ></my-calendar>
        <u-popup :show="showPopup" @close="showPopup = false" :round="30" closeable>
            <view class="popup-content">
                <view class="title">膳食方案</view>
                <view class="con-box">
                    <view class="item" v-for="(item,index) in foodList" :key="index">
                        <view class="text">{{item.foodName}}</view>
                        <view class="num">{{item.gram}}g</view>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-popup :show="showPopup2" @close="showPopup2 = false" :round="30" closeable>
            <view class="popup-content">
                <view class="title">营养信息详情</view>
                <view class="con-box">
                    <view class="item" v-for="(item,index) in nutritionDetailKeylist" :key="index">
                        <view class="text">{{item.name}}</view>
                        <view class="num">{{nutritionDetail[item.key] }}mg</view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    findDayDietaryIntake,
    findRecommendStatistics,
    findFoodList,
    findNutritionDetail,
    findNextWeekDietaryRecommend,
} from '@/api/index.js'
import { mapGetters } from 'vuex'
import myCalendar from '@/components/myCalendar/myCalendar.vue';
const dayjs = require('@/utils/dayjs.min.js');
export default {
    components: {
        myCalendar,
    },
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            defaultDate: [],
            maxDate: undefined,
            minDate: undefined,
            currentSearchTime: undefined, // 当前查询的时间
            showCalendar: false, // 日历控件显示
            showPopup: false, // 膳食方案弹窗
            showPopup2: false, // 营养信息弹窗
            weekType: 1, //0本周，1下周
            barTitle: '具体吃啥呢',
            intakeInfo: {
                M1: null,
                M2: null,
                M3: null,
                M4: null,
                MA: null,
            },
            list: [
                { name: '早餐', key: 'M1', type: 1, img: 'http://oss.antaimedical.com/images/pro/2024/10/670c73f7e4b0d615350f3092bHG69Dw65lOt87c7fcce68afbd82f132626d1963b7d7.png' },
                { name: '午餐', key: 'M2', type: 2, img: 'http://oss.antaimedical.com/images/pro/2024/10/670c7413e4b0d615350f3093WJ6FVPQvmzld4577b6da814e7852a01a11026c14f789.png' },
                { name: '晚餐', key: 'M3', type: 3, img: 'http://oss.antaimedical.com/images/pro/2024/10/670c746ce4b0be9d444233a51gLQ9UriuRenda70d70e9704b9bc8cc1328aab04fce8.png' },
                { name: '加餐', key: 'M4', type: 4, img: 'http://oss.antaimedical.com/images/pro/2024/10/670c747de4b0d615350f3094dSypTWQKm1wcd6253a9222eae7fabf2947ca3af61fc1.png' },
                { name: '汇总', key: 'MA', type: 5, img: 'http://oss.antaimedical.com/images/pro/2024/10/670c748ce4b0be9d444233a6HZOTqi5UR8qEa3ea11bdee085e276b91f027294025b6.png' },
            ],
            recommendList: [],
            foodList: [],
            nutritionDetail: {},
            nutritionDetailKeylist: [
                { key: 'vitaminaSum', name: '维生素A' },
                { key: 'vitaminbSum', name: '维生素B' },
                { key: 'vitamincSum', name: '维生素C' },
                { key: 'ironSum', name: '铁' },
                { key: 'zincSum', name: '锌' },
                { key: 'calciumSum', name: '钙' },
            ]
        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    filters: {
        cardVal (val) {
            return val||val!=0 ? val : '***'
        },
    },
    onLoad (OPTIONS) {
        this.weekType = OPTIONS.weekType || '0'
        if (this.weekType == 0) {
            this.barTitle = '具体吃啥呢'
            this.minDate = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
            this.maxDate = dayjs(this.minDate).add(6, 'day').format('YYYY-MM-DD');
            this.currentSearchTime = dayjs().format('YYYY/MM/DD')
            this.defaultDate[0] = dayjs().format('YYYY-MM-DD');
        } else {
            this.barTitle = '下周推荐预览'
            // 获取本周开始日期
            let weekStartDay = dayjs().subtract('1','day').startOf('week').format('YYYY-MM-DD')
            // 获取下周开始日期
            let startDay = dayjs(weekStartDay).startOf('week').add(8, 'day').format('YYYY-MM-DD')
            this.minDate = startDay
            this.maxDate = dayjs(startDay).add(6, 'day').format('YYYY-MM-DD');
            this.defaultDate[0] = startDay
            this.currentSearchTime = dayjs(startDay).format('YYYY/MM/DD')
        }
    },
    onShow () {
        this.init()
    },
    methods: {
        async handleoOptionPopup (value) {
            await this.findFoodList(value.type)
            this.showPopup = true
        },
        async handleoDetailPopup (value) {
            await this.findNutritionDetail(value.type)
            this.showPopup2 = true
        },
        async init () {
            uni.showLoading({
                title: '加载中...'
            })
            if (this.weekType == 0) {
                await this.findRecommendStatistics()
            } else {
                await this.findNextWeekDietaryRecommend()
            }
            uni.hideLoading()
        },
        // 查询数据
        async findRecommendStatistics () {
            let params = {
                weekType: this.weekType,
                userId: this.userInfo.userId,
                time: this.defaultDate[0],
            }
            await findRecommendStatistics(params).then((res) => {
                this.recommendList = res.data
            })
        },
        // 下周推荐预览
        async findNextWeekDietaryRecommend () {
            let params = {
                userId: this.userInfo.userId,
                bodyId: this.userInfo.bodyId,
                time: this.defaultDate[0],
            }
            await findNextWeekDietaryRecommend(params).then((res) => {
                this.recommendList = res.data
            })
        },
        // 膳食方案查询食物列表
        async findFoodList (type) {
            let params = {
                weekType: this.weekType,
                userId: this.userInfo.userId,
                time: this.defaultDate[0],
                type: type,
            }
            await findFoodList(params).then((res) => {
                this.foodList = res.data
            })
        },
        // 查询营养信息详情
        async findNutritionDetail (type) {
            let params = {
                weekType: this.weekType,
                userId: this.userInfo.userId,
                time: this.defaultDate[0],
                type: type,
            }
            await findNutritionDetail(params).then((res) => {
                this.nutritionDetail = res.data
            })
        },
        navigateTo (type) {
            if (type != 5) {
                uni.navigateTo({
                    url: `/pagesA/health/diet/recommended?type=${type}&day=${this.currentSearchTime}`
                })
            }
        },
        // 选择日期
        selectDate (e) {
            console.log(e);
            this.defaultDate[0] = e[0]
            this.currentSearchTime = e[0].replaceAll('-', '/')
            this.init()
            this.showCalendar = false
        },
        // 上一个选项
        reduceTap () {
            let pre = dayjs(dayjs(this.currentSearchTime).subtract(1, 'day')).format('YYYY/MM/DD')
            let min = dayjs(this.minDate).format('YYYY/MM/DD')
            if (!dayjs(pre).isBefore(min)) { // 比对前一天是否是最小天数的前一天
                this.currentSearchTime = pre
                this.defaultDate[0] = pre.replaceAll('/', '-')
                this.init()
            } else {
                uni.showToast({
                    title: '已经是最后一页',
                    icon: 'none'
                })
            }
        },
        // 下一个选项
        plusTap () {
            let next = dayjs(dayjs(this.currentSearchTime).add(1, 'day')).format('YYYY/MM/DD')
            let max = dayjs(this.maxDate).format('YYYY/MM/DD')
            if (!dayjs(next).isAfter(max)) { // 比对后一天是否是最大天数的后一天
                this.currentSearchTime = next
                this.defaultDate[0] = next.replaceAll('/', '-')
                this.init()
            } else {
                uni.showToast({
                    title: '已经是最后一页',
                    icon: 'none'
                })
            }
        },
    }
}
</script>
<style lang="scss">
page {
    background-color: #fafafa;
    min-height: 100%;

    .u-popup__content {
        border-top-left-radius: 128rpx;
    }

    .u-popup__content__close {
        top: 48rpx !important;
        right: 48rpx !important;

        .u-icon__icon {
            font-size: 28rpx !important;
        }
    }
}
</style>
<style lang="scss" scoped>
.dietDetails {
    padding: 0 48rpx 148rpx;

    .m-container {
        margin-top: 48rpx;

        .tips {
            font-size: 32rpx;
            color: #666666;
            text-align: left;
        }

        .date_h {
            padding: 48rpx 0 32rpx;

            .next_p,
            .pre_p {
                background-color: #545dde;

                .iconfont {
                    color: #fff;
                    font-size: 16rpx;
                }
            }

            .date_m {
                background-color: #545dde;
                color: #fff;

                .iconfont {
                    color: #fff;
                    font-size: 16rpx;
                }
            }
        }
    }

    .o_e_card {
        margin-bottom: 20rpx;
        padding: 32rpx;

        .c_tips {
            padding: 0 32rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 24rpx;
            color: #333;
            .icon {
                width: 60rpx;
                height: 60rpx;
                margin-right: 5rpx;
            }
            .meal-time {
                font-size: 18rpx;
                margin-left: 20rpx;
            }
        }

        .card_c {
            text-align: left;
            font-size: 24rpx;
            color: #666666;
            background: #fafafa;
            padding: 24rpx 32rpx;
            border-radius: 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                .text {
                    margin-bottom: 12rpx;
                }
                .num {
                    font-size: 32rpx;
                    color: #333;
                    font-weight: 600;
                }
            }
        }
        .btn-ss {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 32rpx;
            .btn-item {
                padding: 12rpx 24rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
                line-height: 44rpx;
                text-align: left;
                width: 296rpx;
                height: 72rpx;
                border-radius: 198rpx 198rpx 198rpx 198rpx;
                border: 2rpx solid #f5f5f5;
            }
        }
    }
    .popup-content {
        padding: 48rpx;
        min-height: 720rpx;
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
        }
        .con-box {
            padding: 32rpx 48rpx;
            background: #f2f3fd;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            margin-top: 48rpx;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 28rpx;
                &:last-child {
                    margin-bottom: 0;
                }
                .text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #666666;
                }
                .num {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                }
            }
        }
    }
}
</style>